<template>
  <a-drawer width="89%" closable placement="right" :visible="visible" @close="visible = false">
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000; font-weight: bold">{{ titleName }}</div>
    </div>
    <div class="box">
      <div class="header-box">
        <h1>客户信息</h1>
      </div>
      <a-row class="box-title-row">
        <a-col :span="6"> 客户姓名：{{ row_record.clientName }} </a-col>
        <a-col :span="6"> 联系电话：{{ row_record.tel }} </a-col>
        <a-col :span="6"> 客户卡号：{{ row_record.cardNo }} </a-col>
        <a-col :span="6"> 咨询师：{{ row_record.receiveMan }} </a-col>
      </a-row>
      <a-row class="box-title-row2">
        <a-col :span="24">
          <p>待治疗项目列表</p>
          <span>勾选选择需要治疗的项目</span>
        </a-col>
      </a-row>
      <div class="reception-table table-one-style">
        <a-table
          :scroll="{ x: 500 }"
          :columns="innerColumns"
          :data-source="dataList"
          :rowKey="(record, index) => record.tbConsultItemId"
          :pagination="pagination"
          :bordered="true"
          @change="tableHandleChange"
          :loading="tableLoading"
          :row-selection="rowSelectionsSmallTable" 
        >
          <!--序号-->
          <template slot="index" slot-scope="text, record, index">
            <span>{{(pagination.pageNum-1)*pagination.pageSize+(index+1)}}</span>
          </template>
          <template slot="rqty" slot-scope="text, record, index">
            <a-input-number
              :min="0"
              :step="1"
              :value="text"
              :max="record.residueQty"
              style="width: 120px"
              placeholder="次数"
              :precision="0"
              @change="(value) => valChange(value, record, index, 'rqty')"
              :class="record.principalBorder ? 'colorBorder' : ''"
              :ref="`principalBorder_${index}`"
              @blur="blurChange('principalBorder', 'rqty')"
            ></a-input-number>
            <!-- @blur="blurChange('principalBorder', 'rqty')" -->
          </template>
        </a-table>
      </div>
      <div class="footer-box-btn">
        <a-button type="primary" class="btn-style" @click="handleSubmit()"> 提交 </a-button>
      </div>

      <!-- 已治疗项目列表 -->
      <a-row class="box-title-row2">
        <a-col :span="24">
          <p>已治疗项目列表</p>
          <span> </span>
        </a-col>
      </a-row>
      <div class="reception-table">
        <a-table
          :scroll="{ x: 500 }"
          :columns="innerColumns2"
          :data-source="dataList2"
          :rowKey="(record, index) => record.tbConsultItemId"
          :pagination="pagination2"
          :bordered="false"
          @change="tableHandleChange2"
          :loading="tableLoading"
        >
          <!--序号-->
          <template slot="index" slot-scope="text, record, index">
            <span>{{(pagination2.pageNum-1)*pagination2.pageSize+(index+1)}}</span>
          </template>
           
        </a-table>
      </div>
    </div>
    <recheck-doctor ref="recheckDoctor" @projectAddOk="projectAddOk" :row_record="row_record" :project_data="projectData"></recheck-doctor>
  </a-drawer>
</template>

<script>
import { SelectUserProject, UpdateTbConsultItem } from '@/api/modular/main/customer/cashier'
import recheckDoctor from '@/views/departmentReception/reception/recheckDoctor'

export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  components: {
    recheckDoctor
  },
  data() {
    return {
      selectedRowKeys: [],
      tableLoading: false,
      titleName: '治疗开单',
      pagination: {
        pageNum: 1,
        pageSize: 5,
        current: 1,
        total: 20,
      },
      pagination2: {
        pageNum: 1,
        pageSize: 5,
        current: 1,
        total: 20,
      },

      spinning: true,
      visible: false,
      form: this.$form.createForm(this),
      innerColumns: [
         
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80 },
        {
          title: '科室',
          align: 'center',
          dataIndex: 'execDeptName',
          width: 120,
          ellipsis: true,
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'itemName',
          width: 180,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.itemNameRowSpan,
              }
            }
          }
        },
        {
          title: '执行次数',
          align: 'center',
          dataIndex: 'rqty',
          width: 150, 
          scopedSlots: { customRender: 'rqty' },
          // customRender: (text, record) => {
          //   // text 当前行的值，record 当前行数据
          //   return {
          //     children: text,
          //     attrs: {
          //       rowSpan: record.rqtyRowSpan,
          //     }
          //   }
          // }
        },
        {
          title: '购买数量',
          align: 'center',
          dataIndex: 'qty',
          width: 100,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.qtyRowSpan,
              }
            }
          }
        },
        {
          title: '剩余数量',
          align: 'center',
          dataIndex: 'residueQty',
          width: 100,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.residueQtyRowSpan,
              }
            }
          }
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'unit',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.unitRowSpan,
              }
            }
          }
        },
        {
          title: '咨询人员',
          align: 'center',
          dataIndex: 'consultMan',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.consultManRowSpan,
              }
            }
          }
        },
        // {
        //   title: '成交日期',
        //   align: 'center',
        //   dataIndex: 'chargeDate',
        //   width: 120,
        //   ellipsis: true,
        //   customRender: (text, record) => {
        //     // text 当前行的值，record 当前行数据
        //     return {
        //       children: text,
        //       attrs: {
        //         rowSpan: record.chargeDateRowSpan,
        //       }
        //     }
        //   }
        // },
        
        {
          title: '未执行金额',
          align: 'center',
          dataIndex: 'residueAmt',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.residueAmtRowSpan,
              }
            }
          }
        },
        {
          title: '欠费',
          align: 'center',
          dataIndex: 'noPayAmt',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.noPayAmtRowSpan,
              }
            }
          }
        },
        {
          title: '成交日期',
          align: 'center',
          dataIndex: 'recordDate',
          width: 120,
          ellipsis: true,
          customRender: (text, record) => {
            // text 当前行的值，record 当前行数据
            return {
              children: text,
              attrs: {
                rowSpan: record.recordDateRowSpan,
              }
            }
          }
        },
      ],
      innerColumns2: [
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80, fixed: 'left' },
        {
          title: '科室',
          align: 'center',
          dataIndex: 'execDeptName',
          width: 120,
          ellipsis: true,
        },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'itemName',
          width: 180,
          ellipsis: true,
        },
        // {
        //   title: '执行次数',
        //   align: 'center',
        //   dataIndex: 'rqty',
        //   width: 150,
        //   ellipsis: true, 
        // },
        {
          title: '购买数量',
          align: 'center',
          dataIndex: 'qty',
          width: 100,
          ellipsis: true,
        },
        {
          title: '剩余数量',
          align: 'center',
          dataIndex: 'residueQty',
          width: 100,
          ellipsis: true,
        },
        {
          title: '单位',
          align: 'center',
          dataIndex: 'unit',
          width: 120,
          ellipsis: true,
        },
        {
          title: '咨询人员',
          align: 'center',
          dataIndex: 'consultMan',
          width: 120,
          ellipsis: true,
        },
        {
          title: '成交日期',
          align: 'center',
          dataIndex: 'chargeDate',
          width: 120,
          ellipsis: true,
        },
        {
          title: '未执行金额',
          align: 'center',
          dataIndex: 'residueAmt',
          width: 120,
          ellipsis: true,
        },
        {
          title: '欠费',
          align: 'center',
          dataIndex: 'noPayAmt',
          width: 120,
          ellipsis: true,
        },
      ],

      lookImgVisible: false,

      dataList: [],
      dataList2: [],
      checkSelectData: [],

      projectData:[]
    }
  },
  computed: {
    // 项目里面的展开列表数据的勾选
    rowSelectionsSmallTable() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        columnTitle: ' ',
        onSelect: (record, selected, selectedRows, nativeEvent) => {
          console.log(selectedRows)
          this.checkSelectData = [...selectedRows]
        },
        onChange: (selectedRowKeys, selectedRows, state, record) => {
          this.selectedRowKeys = selectedRowKeys // 默认选中项
        },
      }
    },
  },
  methods: {
    // 合并
    rowSpan(key) { 
      let arr = this.dataList
        .reduce((result, item) => {
          if (result.indexOf(item[key]) < 0) {
            result.push(item[key])
          }
          return result
        }, [])
        .reduce((result, keys) => {
          const children = this.dataList.filter((item) => item[key] === keys)
          result = result.concat(
            children.map((item, index) => ({
              ...item,
              [`${key}RowSpan`]: index === 0 ? children.length : 0,
            }))
          )
          return result
        }, [])
      this.dataList = arr
      console.log(this.dataList)
      return arr 
    },
    // change事件赋值
    valChange(value, record, index, t) { 
      this.dataList[(this.pagination.pageNum-1)*this.pagination.pageSize+index][`${t}`] = value 
      this.dataList = [...this.dataList] 
    },

    callback(key) {
      console.log(key)
    },

    handleCancel() {
      this.lookImgVisible = false
    },
    // 查看图片
    lookImg() {
      this.lookImgVisible = true
    },
    // 进入页面调
    show() {
      this.visible = true
      this.form.resetFields()
      this.selectedRowKeys = [] // 进入页面清空选中项
      this.checkSelectData = []

      this.$nextTick(() => {
        this.spinning = true
        console.log('行数据', this.row_record)
        this.spinning = false

        this.pagination.pageNum = 1
        this.pagination.pageSize = 5
        this.pagination.current = 1

        this.pagination2.pageNum = 1
        this.pagination2.pageSize = 5
        this.pagination2.current = 1
        this.tableLoading = true

        this.listFunc()
      })
    },
    // 请求
    listFunc() {
      // 明细
      let sendData = {
        clientId: this.row_record.clientId,
      }
      SelectUserProject(sendData).then((res) => {
        if (res.code == 200) {
          this.tableLoading = false

          let newData1 = res.rows.filter(elemt => {
            return elemt.isTreated === false
          }) 
          let newData2 = res.rows.filter(elemt => {
            return elemt.isTreated === true
          })  

          newData1.map((item) => {
            item.principalBorder = false
          })
          this.dataList = newData1 
          this.rowSpan('recordDate')
          
          this.pagination.total = newData1.length>0?newData1[0].total:0

          this.dataList2 = newData2
          this.pagination2.total = newData2.length>0?newData2[0].total:0
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 点击分页
    tableHandleChange(pagination) { 
      console.log(this.dataList)
      this.pagination.pageNum = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      // this.listFunc()
    },
    // 已治疗的点击分页
    tableHandleChange2(pagination) {
      console.log(pagination)
      this.pagination2.pageNum = pagination.current
      this.pagination2.pageSize = pagination.pageSize
      this.pagination2.current = pagination.current
    },

    findFunc(arr, type, typeNum) {
      let newData = arr.find((item) => {
        return item[`${type}`] == typeNum
      })
      if (newData != undefined) {
        return newData.url
      } else {
        return ''
      }
    },
    // 退款的blur 事件
    blurChange(t, rep) { 
      // 判读输入框实退金额是否输入
      console.log(this.checkSelectData)
      let setData = this.checkSelectData.map((item) => {
        console.log(item)
        if (item[`${rep}`] != undefined && item[`${rep}`] !== '' && item[`${rep}`] != null && item[`${rep}`] > 0) {
          item[`${t}`] = false
        } else {
          item[`${t}`] = true
        }
        return item
      })
      this.checkSelectData = [...setData]
    },
    // 提交
    handleSubmit() {
      if (this.checkSelectData.length < 1) {
        this.$message.error('请选勾选需要开单的项目')
        return false
      }

      let Num = []
      let setData = this.checkSelectData.map((item, index) => {
        console.log(item)
        if (!item.rqty) {
          item.principalBorder = true 
          Num.push(1)
        } else {
          item.principalBorder = false
        }
        return item
      })
      this.checkSelectData = setData

      if (Num.length > 0) {
        this.$message.error('请先输入执行次数')
        return false
      }
      let sendData = {
        manyLines: this.checkSelectData,
      } 
      this.projectData = this.checkSelectData

      this.$nextTick(() => {
        this.$refs.recheckDoctor.show()  
      })
      
      // return false

      // UpdateTbConsultItem(sendData).then((result) => {
      //   if (result.code == 200) {
      //     this.visible = false
      //     this.$message.success(result.message)
      //   } else {
      //     this.$message.error(result.message)
      //   }
      // })
    },

    // 指派完医生
    projectAddOk(){
      
      
      this.$parent.$refs.table.loadData()
      setTimeout(() => {
        this.visible = false
      }, 1000);
      
    }
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-drawer-body {
  padding: 10px 20px !important;
  background-color: #f0f2f5;
}
// .table-padding-style {
//   padding: 50px 24px;
//   border-bottom: 1px solid #e8e8e8;
// }

/deep/ .ant-table-tbody > tr:last-child > td {
  // border-bottom: 0 !important;
}
/deep/ .ant-tabs-card-content {
  img {
    width: 100% !important;
  }
}
/deep/ .colorBorder {
  border-color: red !important;
}
.box {
  background-color: #fff;
  // height: calc(100vh - 75px);
  .header-box {
    border-bottom: 1px solid #e9e9e9;
    padding: 10px 20px;
    h1 {
      font-size: 15px;
      margin: 0;
    }
  }
  .box-title-row {
    padding: 10px 20px;
    .ant-col-6 {
      font-size: 13px;
    }
  }
  .box-title-row2 {
    padding: 10px 20px;
    border-bottom: 1px solid #e9e9e9;
    .ant-col-24 {
      display: flex;
      p {
        margin: 0;
        font-size: 14px;
        font-weight: 800;
      }
      span {
        border-left: 4px solid #e9e9e9;
        font-size: 12px;
        display: block;
        margin-left: 10px;
        padding-left: 11px;
        line-height: 20px;
      }
    }
  }
  .reception-table {
    padding: 20px;
    /deep/ .ant-table-thead > tr > th,
    /deep/ .ant-table-tbody > tr > td {
      padding: 10px 16px !important;
    }
  }
  .table-one-style{
    /deep/ .ant-table-thead > tr > th, 
    /deep/ .ant-table-tbody > tr > td{
      padding: 4px 16px !important;
    }
  }
  .footer-box-btn {
    padding: 10px 20px;
    display: flex;
    .btn-style {
      margin-left: auto;
    }
  }
 
}
  
</style>

